<template>

    <div>
        <div class="page-header">
            <Row>
                <Col span="5">
                    <Input v-model="aa" placeholder="单位名称" clearable style="width: 200px" />
                </Col>
                <Col span="5">
                    <Input v-model="bb" placeholder="单位地址" clearable style="width: 200px" />
                </Col>
                <Col span="4">
                    <Button type="primary" class="lyx-mr10" @click="chaxun()">查询</Button>

                    <Button type="primary" class="lyx-mr10" @click="tianjia()">添加</Button>
                </Col>
            </Row>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data2" @on-selection-change="tableSelectChange">

                        <template slot-scope="{ row }" slot="name">
                            <strong>{{ row.name }}</strong>
                        </template>
                        <template slot-scope="{ row, index }" slot="cz">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
                            <Button type="error" size="small" @click="remove(index)">删除</Button>

                        </template>

                    </Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                                   <!--   <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>
                                       <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="100" show-total />
                </Col>
            </Row>
        </div>

        <div>
            <Modal v-model="modal1" title="殡仪馆详情"  width="60">
                <div class="detail">
                    <span  style="font-size: 20px;color: black"><b>沈阳市殡仪馆</b></span>
                    <Row class="p10">
                        <Col span="1">
                            <span class="bold"> <Icon type="md-call" color="black" size="20" /></span>

                        </Col>
                        <Col span="10">
                            <span><b>13478362401</b></span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="1">
                            <span class="bold"><Icon type="md-pin" color="black" size="20" /></span>
                        </Col>
                        <Col span="10">
                            <span ><b> 沈阳 皇姑 鸭绿江北街121-6号</b>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: dodgerblue;"></span></span>
                        </Col>
                    </Row>

                    <span style="color: red;font-size: 30px;"><strong>|</strong></span>
                    <span style="font-size: 20px;color: black">单位介绍</span>
                    <Row class="p10">
                        <Col span="24">
                            <div>沈阳市殡仪馆，是东三省最大的殡仪服务单位，地址沈阳市皇姑区鸭绿江北街121-6号。</div>
                        </Col>
                    </Row>
                    <span style="color: red;font-size: 30px;"><strong>|</strong></span>
                    <span style="font-size: 20px;color: black">工作人员</span><br>
                    <div class="select">
                      <!--  <div class="select1">
                            <Input  placeholder="人员姓名" style="width: 180px" />
                        </div>-->
                      <!--  <div class="select2">
                            <BUTTON type="primary" >搜索</BUTTON>
                        </div>-->
                    </div>

                    <div class="all">
                        <Row :gutter="16">

                            <Col span="6">
                                <div class="b1"><img src="../../../../assets/images/4.jpg" width="150px" height="200px"/><br>
                                </div>
                                <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;张佳天</span><br/>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院长</span>
                            </Col>

                            <Col span="6">
                                <div class="b2"><img src="../../../../assets/images/1.jpg" width="150px" height="200px"/></div>
                                <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;靳迪</span><br/>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;副院长</span>
                            </Col>
                            <Col span="6">
                                <div class="b3"><img src="../../../../assets/images/5.jpg" width="150px" height="200px"/></div>
                                <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;桂野</span><br/>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;遗体整容师</span>
                            </Col>
                            <Col span="6">
                                <div class="b4"><img src="../../../../assets/images/3.jpg" width="150px" height="200px"/></div>
                                <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;孙俪</span><br/>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;火化师</span>
                            </Col>
                        </Row>

                    </div>
                </div>

            </Modal>
        </div>

        <div>
            <Modal v-model="modal2" title="请添加"  width="60">

                <Row gutter="18" >
                    <div id="id1">
                    <Col span="10">
                        所属区域：       <Input v-model="obj.quyu" placeholder="所属区域" clearable style="width: 200px" />
                    </Col>
                    <Col span="10">
                        单位类型：      <Input v-model="obj.leixing" placeholder="单位类型" clearable style="width: 200px" />
                    </Col>
                    </div>
                </Row>

                <Row gutter="18">
                    <div id="id2">
                    <Col span="10">
                        单位名称：    <Input v-model="obj.name" placeholder="单位名称" clearable style="width: 200px" />
                    </Col>
                    <Col span="10">
                        单位地址：      <Input v-model="obj.dizhi" placeholder="单位地址" clearable style="width: 200px" />
                    </Col>
                    </div>
                </Row>

                <Row gutter="18">
                    <div id="id3">

                        <Col span="10">

                         电话：<Input v-model="obj.dianhua" placeholder="电话" clearable style="width: 200px" />
                        </Col>
                        <Col span="10">
                            发布时间：   <Input v-model="obj.date" placeholder="发布时间" clearable style="width: 200px" />
                        </Col>
                    </div>
                </Row>
<!--                    <Col span="3">
                        <Input v-model="name" placeholder="单位地址" clearable style="width: 200px" />
                    </Col>
                    <Col span="3">
                        <Input v-model="dizhi" placeholder="单位地址" clearable style="width: 200px" />
                    </Col>
                    <Col span="3">
                        <Input v-model="dianhua" placeholder="单位地址" clearable style="width: 200px" />
                    </Col>-->

            </Modal>
        </div>
    </div>
</template>

<script>
// import Col from 'iview/src'
export default {
  // components: { Col },
  data () {
    return {
      modal1: false,
      modal2: false,
      columns4: [
        {
          title: '所属区域',
          key: 'quyu'
        },
        {
          title: '单位类型',
          key: 'leixing'
        },
        {
          title: '单位名称',
          slot: 'name'
        },
        {
          title: '单位地址',
          key: 'dizhi'
        },
        {
          title: '电话',
          key: 'dianhua'
        },
        {
          title: '发布时间',
          key: 'date'
        },
        {
          title: '操作',
          slot: 'cz',
          width: 150,
          align: 'center'
        }
      ],
      aa: '',
      bb: '',
      data2: [],
      obj: {

        quyu: '',
        leixing: '',
        name: '',
        dizhi: '',
        dianhua: '',
        date: ''
        /* cz: '查询' */
      },
      data1: [
        {
          /* id: 11, */
          quyu: '和平',
          leixing: '殡仪馆',
          name: '德胜殡仪馆',
          dizhi: '沈阳市和平区128号',
          dianhua: '17620104444',
          date: '2016-10-03'
          /* cz: '查询' */
        },
        {
          quyu: '铁西',
          leixing: '火葬场',
          name: '乍莱火葬场',
          dizhi: '沈阳市铁西区11号',
          dianhua: '1384102568',
          date: '2016-11-03'
          /* cz: '查询' */
        },
        {
          quyu: '皇姑',
          leixing: '公墓',
          name: '西山公墓',
          dizhi: '沈阳市皇姑区22号',
          dianhua: '1765201421',
          date: '2016-05-03'
          /*   cz: '查询' */
        },
        {
          quyu: '大东',
          leixing: '骨灰',
          name: '德惠公司',
          dizhi: '沈阳市大东区28号',
          dianhua: '17640215678',
          date: '2016-10-03'
          /* cz: '查询' */
        },
        {
          quyu: '沈北',
          leixing: '公墓',
          name: '东上公墓',
          dizhi: '沈阳市沈北新区18号',
          dianhua: '17640215555',
          date: '2016-10-03'
          /* cz: '查询' */
        },
        {
          quyu: '于洪',
          leixing: '骨灰',
          name: '慧敏公司',
          dizhi: '沈阳市于洪区115号',
          dianhua: '17640215678',
          date: '2016-10-03'
          /* cz: '查询' */
        },
        {
          quyu: '铁西',
          leixing: '殡仪馆',
          name: '蓝胜殡仪馆',
          dizhi: '沈阳市铁西区28号',
          dianhua: '17642035689',
          date: '2016-10-03'
          /* cz: '查询' */
        }

      ]
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },

    show (index) {
      /* this.$Modal.info({

      /*   this.$Modal.info({

        title: '当前详细内容',
        content: `所属区域：${this.data1[index].quyu}<br>单位类型：${this.data1[index].leixing}<br>单位名称：${this.data1[index].name}<br>单位地址：${this.data1[index].dizhi}<br>电话：${this.data1[index].dianhua}<br>发布时间：${this.data1[index].date}`
      }) */
      this.modal1 = true
    },
    remove (index) {
      if (confirm('确定要删除吗') === true) {
        this.data1.splice(index, 1)
      }
    },

    tianjia () {
      this.data2.push(this.obj)
      this.modal2 = true
    },

    chaxun () {
      //  支持模糊查询
      //  this.xmgcqkJsonsData：用于搜索的总数据
      this.data2 = []
      let search = this.aa
      let search2 = this.bb
      // console.log(aaaaaaaaaaaaaaaaaaaaa,search)

      let newListData = [] //  用于存放搜索出来数据的新数组
      if (search && search2) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1 && item.dizhi.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search) {
        this.data1.filter(item => {
          if (item.name.indexOf(search) !== -1) {
            newListData.push(item)
          }
        })
      } else if (search2) {
        this.data1.filter(item => {
          if (item.dizhi.indexOf(search2) !== -1) {
            newListData.push(item)
          }
        })
      } else {
        this.data2 = this.data1
      }
      /* this.data1 = newListData */
      newListData.filter(item => {
        this.data2.push(item)
      })
      // console.log(newListData)
    }
  },

  created () {
    this.data2 = this.data1
  }
}
</script>

<style scoped>

    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }

    .detail{
        font-size: 14px;
    }
    .bold{
        font-weight: bold;
        margin-right: 4px;
    }
    .p10{
        padding: 10px;
    }
    .select1{
        float: right;
        margin-right: 250px;
        margin-top: 50px;

    }

  /*  另一页样式*/
      .select1{
          float: right;
          margin-right: 250px;
          margin-top: 50px;

      }

    .select2{
        text-align: center;
        float: right;
        margin-right: -250px;
        margin-top: 54px;
        width: 100px;
        height:70px;
    }
    .all{
        margin-left: 70px;
        margin-top: 170px;
    }
    .b1{

        width: 150px;
        height: 200px;
    }
    .b2{

        width: 150px;
        height: 200px;
    }
    .b3{

        width: 150px;
        height: 200px;
    }
    .b4{

        width: 150px;
        height: 200px;
    }

    #id2{
       /* margin-bottom: 10px;*/
        margin-top: 10px;
        text-align: center;
    }
    #id1{
        text-align: center;
    }

    #id3{
        margin-top: 10px;
        text-align: center;
    }
</style>
